<template>
  <div>
      <van-popup v-model="popupShow" position="bottom" style="height:60%">
          <div class="wrapper">
              <div class="adapt wrapper-content">
                  <div class="warpper-img">
                      <img :src="currItem.img" class="warpper-img-src">
                  </div>
                  <div class="detailInfo">
                      <span>{{currItem.title}}</span>
                      <span>￥{{currItem.price}}</span>
                      <div class="detail_inv">
                          <span v-if="currItem.stock">库存:{{currItem.stock}}</span>
                      </div>
                  </div>
              </div>
              <div class="divier"></div>
                  <div class="choice">
                      <div>组合详情:</div>
                      <div v-for="(item,index) in currItem.skus" :key="index" @click="selectSepcs(item)">
                          <div :class="['specsItem',item.id==currSelectId?'selected':'']">
                              <span>{{arr2SepcsList(item)}}</span>
                              <span>￥{{item.price}}</span>
                          </div>
                      </div>
                  </div>
                  <div class="divider"></div>
                      <div class="adapt">
                          <div class="buycount-left">购买数量</div>
                          <van-stepper v-model="buyAmount" class="buycount-right"></van-stepper>
                      </div>  
          </div>
          <div class="buybottom">
            <van-button class="buybuttom-button" @click="addShopping">
                {{buyMode?'确认':'加入购物车'}}
            </van-button>
          </div>
      </van-popup>
  </div>
</template>

<script>
import{mapMutations} from 'vuex'
export default {
  props: ['goodsInfo'],
  components: {
  },
  data() {
    return {
        popupShow:false,
        buyMode:false,
        skuId:-1,
        buyAmount:1,
        currSelectId:0,
        currItem:{},
    };
  },
  computed: {
      ...mapMutations(['addOrder'])
  },
  watch: {
      goodsInfo(newVal){
          this.currItem=this.deepCopy(this.goodsInfo)
      }
  },
  created() {
      if(this.goodsInfo){
          this.currItem=this.deepCopy(this.goodsInfo)
      }
  },
  methods: {
      arr2SepcsList(arr){
          let list=arr.specs.map((item)=>item.value)
              return list.join()         
          
      },
      selectSepcs(item){
          this.currSelectId=item.id
          console.log('ss',item)
          this.skuId=item.spuId
          this.currItem.title=item.title
          this.currItem.stock=item.stock
          this.currItem.price=item.price
      },
      addShopping(){
          if(!this.buyMode){
            if(this.skuId===-1){
                this.$toast.fail('请选择组合')
            }else{
                if(!this.buyMode){
                    this.$store.commit('addCar',{
                        id:this.goodsInfo.id,
                        selected:true,
                        buyAmount:this.buyAmount,
                        skuId:this.skuId
                    })
                }
                this.buyAmount=1
                this.popupShow=false
                this.skuId=-1
                this.currItem=this.deepCopy(this.goodsInfo)
            }
          }else{
              this.$http.get('/api/spu/sku',{params:{ids:this.skuId}}).then(
                  response=>{
                      console.log('sku',response.data)
                      let skuList=response.data
                      skuList[0].buyAmount=this.buyAmount
                      this.$store.commit('addOrder',skuList)
                      this.$router.push({
                          name:'buy',
                          params:{buyMode:0}
                      })
                  }
              )
          }
      },
      deepCopy(data){
          return JSON.parse(JSON.stringify(data))
      }
  },
};
</script>
<style scoped lang="less">
.wrapper{
    margin: 15px 15px;
}
.detailInfo{
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    .detailInfo span:first-child{
        padding-top: 0;
    }
    .detailInfo span{
        padding: 3px 0;
    }
}
.detailInfo .detail_inv{
        text-align: right;
        .detailInfo .detail_inv span:last-child{
            color:#b2b2b2;
            font-size: 14px;
        }
    }
.adapt{
    zoom: 1;
    overflow: hidden;
}
.choice{
    text-align: left;
    margin: 10px 0px;
}
.divier{
    margin-top: 10px;
    height: 1px;
    width: 100%;
    background-color: #e9e9e9;
}
.warpper-img{
    float: left;
    width: 80px;
    height: 80px;
    background: black;
    .warpper-img-src{
        max-height: 100%;
        max-width: 100%;
    }
}
.buycount-left{
    float: left;
    margin: 10px 10px 10px 0;
}
.buycount-right{
    float: right;
    margin: 10px 0px 10px 10px;
}
.specsItem{
    padding: 6px 10px;
    margin: 10px 0px;
    font-size: 15px;
    background: #e9e9e9;
    border-radius: 6px;
    display: flex;
    border: 1px solid #e9e9e9;
    justify-content: space-between;
}
.buybottom{
    position: fixed;
    width: 100%;
    bottom: 0;
    .buybottom-button{
        background-color: rgb(63, 41, 48);
        color: #fff;
        width: 100%;
        font-size: 18px;
    }
}
.selected{
    border:1.5px solid red;
    background: #d8d8d8;
}
</style>